<template>
  <div style="width: 100vw; height: 85vh;">
        <Histogram class="line" :title="waretitle" :barChart="myChart1" :datalist="datalist1" @getsales="getsales1"></Histogram>
    
        <Histogram class="line" :title="title2" :barChart="myChart2" :datalist="datalist2" @getsales="getsales2"></Histogram>
    
  </div>
</template>

<script>
import request from '@/utils/request'
import Histogram from './components/Histogram'
export default {
    name:'jstGoodsquerysales',
    components:{Histogram},
    data() {
        return {
            myChart1:'chart1',
            myChart2:'chart2',
            waretitle:'产品销售',
            title2:'供应商',
            datalist1: [],
            datalist2: [],
        }
    },
    created() {
    },
    methods: {
        getsales1(data){
            if (!data) {
            data={}
            }
            const config={
            url: 'api/jstGoods/querySale',
            methods: 'get',
            params: data
            }
            request(config).then(res=>{
            // 对象转数组
            if (!res.data.content.length) {
                this.datalist1=[]
            }else{
                this.datalist1=Object.values(res.data.content[0])
            }
            })
      },
        getsales2(data){
            if (!data) {
            data={}
            }
            const config={
            url: 'api/jstGoods/querySale',
            methods: 'get',
            params: data
            }
            request(config).then(res=>{
            // 对象转数组
            if (!res.data.content.length) {
                this.datalist2=[]
            }else{
                this.datalist2=Object.values(res.data.content[0])
            }
            })
      },
    },
}
</script>

<style lang="scss" scoped>
    .line{
        max-width: 90%;
        height: 50%;
    }
</style>